<template>
  <div>
    <div v-if="hideGoback" class="bgview">
      <div class="search-normal" @click="$router.push('/search')">
        <img class="x-img" />
      </div>
      <button class="t-btn" @click="shuaiXuan()">筛选</button>
    </div>
    <div v-else class="bgview">
      <div class="goback" @click="goBack()"></div>
      <div class="search-hide" @click="$router.push('/search')">
        <img class="x-img" />
      </div>
      <button class="t-btn" @click="shuaiXuan()">筛选</button>
    </div>
  </div>
</template>

<script setup>
// 父组件向子组件传值
// 在子组件中使用defineProps
defineProps({
  // 是否隐藏返回按钮
  hideGoback: {
    type: Boolean, //数据类型
    default: false, //默认值
  },
});

// 子组件向父组件传值
// 在子组件中定义事件,使用defineEmits
// （['方法名1’，’方法名2‘]）
const emit = defineEmits(["shuaixuan"]);

// 返回
const goBack = () => {
  // console.log("返回");
  history.back();
};

// 帅选
const shuaiXuan = () => {
  // emit("shuaixuan", "11111111");
  emit("shuaixuan", "abcd");
  // emit（’方法名‘，要发送的数据）
};
</script>

<style lang="scss" scoped>
// 搜索顶部view
.bgview {
  position: fixed; /* 设置为固定定位 */
  // position: relative;
  display: flex;
  width: 100%;
  height: 44px;
  //容器内部所有元素的对齐方式
  align-items: center;
  //容器内元素的文本对齐方式
  text-align: right;
  background-color: #fff;
  z-index: 999; /* 设置z-index值，确保在其他元素之上显示 */

  .goback {
    float: left;
    //   position: fixed; /* 设置为固定定位 */
    width: 20px;
    height: 16px;
    //   margin-top: 1rem;
    margin-left: 0.8rem;
    background: url("https://cdn-gdcws-imgs.gdcws.cn/zhunong/20240124/goback.png")
      no-repeat;
    background-size: 100% 100%;
  }
  .search-normal {
    flex: 1;
    margin-left: 30px;
    height: 30px;
    background-color: #666666;
    border-radius: 15px;
    .x-img {
      margin-right: 5px;
      margin-top: 5px;
      width: 15px;
      height: 15px;
      background: url("https://img0.baidu.com/it/u=642967298,3358188151&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260")
        no-repeat;
      background-size: 100% 100%;
      background-color: #fff;
    }
  }

  .search-hide {
    flex: 1;
    margin-left: 8px;
    height: 30px;
    background-color: #666666;
    border-radius: 15px;
    .x-img {
      margin-right: 5px;
      margin-top: 5px;
      width: 15px;
      height: 15px;
      background: url("https://img0.baidu.com/it/u=642967298,3358188151&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260")
        no-repeat;
      background-size: 100% 100%;
      background-color: #fff;
    }
  }
  .t-btn {
    border: none;
    height: 100%;
    width: 60px;
    background-color: #fff;
  }
}
</style>
